/***************************************************************************************

		Custom Styles for CSS3 Awesome Menu
		Created by Mahesh Wickramasinghe
		maheshwicks89@gmail.com

***************************************************************************************/

@header-bg: #eee;
@menu-bg: #eee;
@text-color: #3a3a3a;
//@hover-color: #0eae1a;	//green
//@hover-color: #ff33e7;	//pink
@hover-color: #ff620a;	//orange
//@hover-color: #dc143c;	//crimson
//@hover-color: #428bca;	//blue

.add-header-bg (@to: @header-bg, @from: lighten(@header-bg, 10%)) {
	/* fallback */
	background-color: @from;
	/* Safari 4-5, Chrome 1-9 */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@from), to(@to));
	/* Safari 5.1, Chrome 10+ */
	background: -webkit-linear-gradient(top, @from, @to);
	/* Firefox 3.6+ */
	background: -moz-linear-gradient(top, @from, @to);
	/* IE 10 */
	background: -ms-linear-gradient(top, @from, @to);
	/* Opera 11.10+ */
	background: -o-linear-gradient(top, @from, @to);
	border-bottom: 1px solid darken(@header-bg, 20%);
	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.5);
}

body {
	margin: 0;
	padding: 0;
}

//Theme Configurations


//Custom Theme
header.css3aw-theme-custom {
	.add-header-bg (@to: @header-bg, @from: lighten(@header-bg, 10%));
	>h1, >h2, >h3, >h4, >h5, >h6, >h1 a, >h2 a, >h3 a, >h4 a, >h5 a, >h6 a {color: @text-color !important}
	border-bottom: 1px solid darken(@header-bg, 10%);
	color: @text-color;
	div#css3aw-main-menu-wrapper {border-right: 1px solid lighten(@header-bg, 10%);}
	div#css3aw-social-menu-wrapper {
		border-left: 1px solid lighten(@header-bg, 10%);
		.icon-share {color: @text-color}
		ul li {
			background: @menu-bg;
			color: @text-color;
			border-bottom: 1px solid darken(@menu-bg, 10%);
			a {color: @text-color}
		}
	}
	span.css3aw-menu-dash {background: @text-color;}
	div#css3aw-main-menu-container ul#css3aw-menu >li {
		background: @menu-bg;
		border-bottom: 1px solid darken(@menu-bg, 10%);
		>a {color: @text-color}
		>ul >li {
			border-top: 1px solid darken(@menu-bg, 10%);
			>a {
				color: @text-color;
				transition: color .15s linear;
				-webkit-transition: color .15s linear;
			}
			&:hover >a {color: @hover-color}
		}
		ul li div {
			p, li, label, dt, td, tr, h1, h2, h3, h4, h5, h6 {color: @text-color}
			a {
				color: @hover-color;
				&:hover {color: @text-color}
			}
		}
	}
	div#css3aw-social-menu-wrapper ul#css3aw-social-menu li {backgruond: @menu-bg;}
	hr {border-bottom: 1px solid darken(@menu-bg, 15%);}
	span.icon-play-2.submenu-trigger {color: @text-color;}
}

//Light Theme
header.css3aw-theme-light {
	.add-header-bg (#e9e9e9, #f6f6f6);
	>h1, >h2, >h3, >h4, >h5, >h6, >h1 a, >h2 a, >h3 a, >h4 a, >h5 a, >h6 a {color: #3a3a3a !important}
	border-bottom: 1px solid darken(#e9e9e9, 10%);
	color: #eee;
	div#css3aw-main-menu-wrapper {border-right: 1px solid darken(#e9e9e9, 10%);}
	div#css3aw-social-menu-wrapper {
		border-left: 1px solid darken(#e9e9e9, 10%);
		.icon-share {color: #3a3a3a}
		ul li {
			background: #eee;
			color: #3a3a3a;
			border-bottom: 1px solid darken(@menu-bg, 10%);
			a {color: #3a3a3a}
		}
	}
	span.css3aw-menu-dash {background: #3a3a3a;}
	div#css3aw-main-menu-container ul#css3aw-menu >li {
		background: #eee;
		border-bottom: 1px solid darken(#eee, 10%);
		>a {color: #3a3a3a}
		>ul >li {
			border-top: 1px solid darken(@menu-bg, 10%);
			>a {
				color: #3a3a3a;
				transition: color .15s linear;
				-webkit-transition: color .15s linear;
			}
			&:hover >a {color: @hover-color}
		}
		ul li div {
			p, li, label, dt, td, tr, h1, h2, h3, h4, h5, h6 {color: #3a3a3a}
			a {
				color: @hover-color;
				&:hover {color: #3a3a3a}
			}
		}
	}
	hr {border-bottom: 1px solid darken(#eee, 10%);}
	span.icon-play-2.submenu-trigger {color: #3a3a3a;}
}

//Dark Theme
header.css3aw-theme-dark {
	.add-header-bg (#3a3a3a, #444);
	>h1, >h2, >h3, >h4, >h5, >h6, >h1 a, >h2 a, >h3 a, >h4 a, >h5 a, >h6 a {color: #ddd !important}
	border-bottom: 1px solid lighten(#3a3a3a, 10%);
	color: #ddd;
	div#css3aw-main-menu-wrapper {border-right: 1px solid lighten(#3a3a3a, 10%);}
	div#css3aw-social-menu-wrapper {
		border-left: 1px solid lighten(#3a3a3a, 10%);
		.icon-share {color: #ddd}
		ul li {
			background: #3a3a3a;
			color: #ddd;
			border-bottom: 1px solid lighten(#3a3a3a, 10%);
			a {color: #ddd}
		}
	}
	span.css3aw-menu-dash {background: #ddd;}
	div#css3aw-main-menu-container ul#css3aw-menu >li {
		background: #3a3a3a;
		border-bottom: 1px solid lighten(#3a3a3a, 10%);
		>a {color: #ddd}
		>ul >li {
			border-top: 1px solid lighten(#3a3a3a, 8%);
			>a {
				color: #ddd;
				transition: color .15s linear;
				-webkit-transition: color .15s linear;
			}
			&:hover >a {color: @hover-color}
		}
		ul li div {
			p, li, label, dt, td, tr, h1, h2, h3, h4, h5, h6 {color: #ddd}
			a {
				color: @hover-color;
				&:hover {color: #ddd}
			}
		}
	}
	div#css3aw-social-menu-wrapper ul#css3aw-social-menu li {backgruond: #3a3a3a;}
	hr {border-bottom: 1px solid lighten(#3a3a3a, 10%);}
	span.icon-play-2.submenu-trigger {color: #ddd;}
}

header[class^="css3aw-theme-"] {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	height: 46px;
	@media (min-width: 1024px) {height: 60px;}
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 14px;
	@media (min-width: 1024px) {font-size: 16px;}
	*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
	ul, li {
		margin: 0;
		padding: 0;
		list-style-type: none;
		list-style-image: none;
	}
	>h1, >h2, >h3, >h4, >h5, >h6 {
		margin: 0;
		padding: 0;
		line-height: 46px;
		font-size: 22px;
		font-weight: 100;
		@media (min-width: 1024px) {line-height: 60px; font-size: 28px;}
	}
	a:link, a:visited {
		color: @text-color;
		text-decoration: none;
	}



	div#css3aw-main-menu-wrapper {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 46px;
		height: 46px;
		@media (min-width: 1024px) {width: 60px; height: 60px;}
		float: left;

		div#css3aw-menu-trigger-icon {
			height: 46px;
			width: 46px;
			padding-top: 14px;
			cursor: pointer;
			@media (min-width: 1024px) {
				width: 60px;
				height: 60px;
				padding-top: 18px;
			}

			span.css3aw-menu-dash {
				display: block;
				height: 3px;
				width: 20px;
				margin: 3px auto;
				transition: background .15s linear;
				-webkit-transition: background .15s linear;
				@media (min-width: 1024px) {width: 28px; height: 4px; margin: 4px auto;}
			}
			&.hover span.css3aw-menu-dash, &.clicked span.css3aw-menu-dash {
				background: @hover-color;
			}
		}

		div#css3aw-main-menu-container {
			width: 0;
			overflow-x: hidden;
			overflow-y: auto;
			position: relative;
			margin-top: 1px;
			transition: width .15s linear;
			-webkit-transition: width .15s linear;
			ul#css3aw-menu {
				width: 0px;
				overflow-y: auto;
				overflow-x: hidden;
				position: relative;
				transition: width .15s linear;
				-webkit-transition: width .15s linear;
				>li {
					width: 0px;
					overflow: hidden;
					text-align: left;
					line-height: 46px;
					>a {
						opacity: 0;
						transition: opacity .45s linear, color .15s linear;
						-webkit-transition: opacity .45s linear, color .15s linear;
					}
					&:hover > a {color: @hover-color;}
					transition: width .15s linear;
					-webkit-transition: width .15s linear;
					@media (min-width: 1024px) {line-height: 60px;}
					a {
						display: block;
						white-space: nowrap;
						span[class^="icon-"] {
							width: 46px;
							display: inline-block;
							text-align: center;
							margin-right: 10px;
							@media (min-width: 1024px) {width: 60px;margin-right: 12px;}
						}
						
					}
					>ul {
						display: none;
						>li {
							padding-left: 20px;
							>ul {display: none;}
							div {
								display: block;
								height: auto;
								overflow: hidden;
								padding-bottom: 10px;
								padding-top: 10px;
								@media (min-width: 1024px) {padding-bottom: 20px; padding-top: 20px;}
								margin-right: 20px;
								h1,h2,h3,h4,h5,h6 {margin: 0; padding: 0; font-weight: 600; line-height: 1; padding-top: 10px; display: block;}
								h1, h2, h3 {font-size: 14px; text-transform: uppercase;}
								h4, h5, h6 {font-size: 12px; text-transform: uppercase;}
								p, a, li, label, dt, td, tr {font-size: 12px; line-height: 1.4;}
								@media (min-width: 1024px) {h1,h2,h3 {font-size: 15px} h4,h5,h6 {font-size: 13px} p, a, li, label, dt, td, tr {font-size: 13px}}
								p {margin-bottom: 15px; text-align: justify;}
								a {display: inline-block; border-bottom: 1px dotted @hover-color; transition: color .25s linear; -webkit-transition: color .25s linear;}
								p.bordered {border-left: 10px solid darken(@menu-bg, 10%); padding-left: 9px;}
								p.bordered-hover {border-left: 10px solid @hover-color; padding-left: 9px;}
								ul {
									height: auto;
									overflow: hidden;
									margin: 10px 20px 10px 0;
									li:before {content: "- ";}
								}
								
								hr {
									border-top: none;
									box-shadow: none;
									outline: none;
									margin-top: 15px;
									margin-bottom: 15px;
								}
								img.css3aw-full-width {margin: 15px 20px 15px 0; width: 100%; height: auto; display: block;}
								img.css3aw-thumbnail {float: left; width: 80px; height: auto; display: inline-block; margin-right: 10px; margin-top: 10px; margin-bottom: 5px;}
							}
						}

					}

					span.icon-play-2.submenu-trigger {
						display: inline-block;
						top: 0;
						right: 0;
						opacity: 0;
						height: 46px;
						width: 46px;
						line-height: 46px;
						text-align: center;
						cursor: pointer;
						float: right;
						-webkit-transform: rotate(90deg);
						-moz-transform: rotate(90deg);
						-ms-transform: rotate(90deg);
						-o-transform: rotate(90deg);
						filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
						transition: all .25s linear;
						-webkit-transition: all .25s linear;
						@media (min-width: 1024px) {width: 60px;height: 60px; line-height: 60px;}
						&.clicked {
							color: @hover-color;
							-webkit-transform: rotate(30deg);
							-moz-transform: rotate(30deg);
							-ms-transform: rotate(30deg);
							-o-transform: rotate(30deg);
							filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
							}
						}
					}

				
				}

				&.hover {
					width: 46px;
					@media (min-width: 1024px) {width: 60px;}
					ul#css3aw-menu {
						width: 46px;
						@media (min-width: 1024px) {width: 60px;}
						li {
							width: 46px;
							@media (min-width: 1024px) {width: 60px;}
							>a {opacity: 1;}
							&:first-child {transition-delay: .05s; -webkit-transition-delay: .05s}
							&:nth-child(2) {transition-delay: .1s; -webkit-transition-delay: .1s}
							&:nth-child(3) {transition-delay: .15s; -webkit-transition-delay: .15s}
							&:nth-child(4) {transition-delay: .2s; -webkit-transition-delay: .2s}
							&:nth-child(5) {transition-delay: .25s; -webkit-transition-delay: .25s}
							&:nth-child(6) {transition-delay: .3s; -webkit-transition-delay: .3s}
							&:nth-child(7) {transition-delay: .35s; -webkit-transition-delay: .35s}
							&:nth-child(8) {transition-delay: .4s; -webkit-transition-delay: .4s}
							&:nth-child(9) {transition-delay: .45s; -webkit-transition-delay: .45s}
							&:nth-child(10) {transition-delay: .5s; -webkit-transition-delay: .5s}
							&:nth-child(11) {transition-delay: .55s; -webkit-transition-delay: .55s}
							&:nth-child(12) {transition-delay: .6s; -webkit-transition-delay: .6s}
							&:nth-child(13) {transition-delay: .65s; -webkit-transition-delay: .65s}
							&:nth-child(14) {transition-delay: .7s; -webkit-transition-delay: .7s}
							&:nth-child(15) {transition-delay: .75s; -webkit-transition-delay: .75s}
							&:nth-child(16) {transition-delay: .8s; -webkit-transition-delay: .8s}
							&:nth-child(17) {transition-delay: .85s; -webkit-transition-delay: .85s}
							&:nth-child(18) {transition-delay: .9s; -webkit-transition-delay: .9s}
							&:nth-child(19) {transition-delay: .95s; -webkit-transition-delay: .95s}
							&:nth-child(20) {transition-delay: 1s; -webkit-transition-delay: 1s}
							&:nth-child(21) {transition-delay: 1.05s; -webkit-transition-delay: 1.05s}
							&:nth-child(22) {transition-delay: 1.1s; -webkit-transition-delay: 1.1s}
							&:nth-child(23) {transition-delay: 1.15s; -webkit-transition-delay: 1.15s}
							&:nth-child(24) {transition-delay: 1.2s; -webkit-transition-delay: 1.2s}
							&:nth-child(25) {transition-delay: 1.25s; -webkit-transition-delay: 1.25s}
							&:nth-child(26) {transition-delay: 1.3s; -webkit-transition-delay: 1.3s}
							&:nth-child(27) {transition-delay: 1.35s; -webkit-transition-delay: 1.35s}
							&:nth-child(28) {transition-delay: 1.4s; -webkit-transition-delay: 1.4s}
							&:nth-child(29) {transition-delay: 1.45s; -webkit-transition-delay: 1.45s}
							&:nth-child(30) {transition-delay: 1.5s; -webkit-transition-delay: 1.5s}
							&:nth-child(31) {transition-delay: 1.55s; -webkit-transition-delay: 1.55s}
							&:nth-child(32) {transition-delay: 1.6s; -webkit-transition-delay: 1.6s}
							&:nth-child(33) {transition-delay: 1.65s; -webkit-transition-delay: 1.65s}
							&:nth-child(34) {transition-delay: 1.7s; -webkit-transition-delay: 1.7s}
							&:nth-child(35) {transition-delay: 1.75s; -webkit-transition-delay: 1.75s}
							&:nth-child(36) {transition-delay: 1.8s; -webkit-transition-delay: 1.8s}
							&:nth-child(37) {transition-delay: 1.85s; -webkit-transition-delay: 1.85s}
							&:nth-child(38) {transition-delay: 1.9s; -webkit-transition-delay: 1.9s}
							&:nth-child(39) {transition-delay: 1.95s; -webkit-transition-delay: 1.95s}
							&:nth-child(40) {transition-delay: 2s; -webkit-transition-delay: 2s}
						}
					}
				}

				&.hover.hover-extended {
					width: 280px;
					ul#css3aw-menu {
						width: 280px;
						li {
							width: 280px;
							>a {opacity: 1;}
							span.icon-play-2.submenu-trigger {
								opacity: 0.7;
								transition-delay: .45s;
								-webkit-transition-delay: .45s;
							}
						}
					}
				}

				&.clicked {
					width: 280px;
					transition-duration: .25s;
					-webkit-transition-duration: .25s;
					ul#css3aw-menu {
						width: 280px;
						transition-duration: .25s;
						-webkit-transition-duration: .25s;
						li {
							width: 280px;
							>a {opacity: 1;}
							transition-duration: .25s;
							-webkit-transition-duration: .25s;
							&:first-child {transition-delay: .05s; -webkit-transition-delay: .05s}
							&:nth-child(2) {transition-delay: .1s; -webkit-transition-delay: .1s}
							&:nth-child(3) {transition-delay: .15s; -webkit-transition-delay: .15s}
							&:nth-child(4) {transition-delay: .2s; -webkit-transition-delay: .2s}
							&:nth-child(5) {transition-delay: .25s; -webkit-transition-delay: .25s}
							&:nth-child(6) {transition-delay: .3s; -webkit-transition-delay: .3s}
							&:nth-child(7) {transition-delay: .35s; -webkit-transition-delay: .35s}
							&:nth-child(8) {transition-delay: .4s; -webkit-transition-delay: .4s}
							&:nth-child(9) {transition-delay: .45s; -webkit-transition-delay: .45s}
							&:nth-child(10) {transition-delay: .5s; -webkit-transition-delay: .5s}
							&:nth-child(11) {transition-delay: .55s; -webkit-transition-delay: .55s}
							&:nth-child(12) {transition-delay: .6s; -webkit-transition-delay: .6s}
							&:nth-child(13) {transition-delay: .65s; -webkit-transition-delay: .65s}
							&:nth-child(14) {transition-delay: .7s; -webkit-transition-delay: .7s}
							&:nth-child(15) {transition-delay: .75s; -webkit-transition-delay: .75s}
							&:nth-child(16) {transition-delay: .8s; -webkit-transition-delay: .8s}
							&:nth-child(17) {transition-delay: .85s; -webkit-transition-delay: .85s}
							&:nth-child(18) {transition-delay: .9s; -webkit-transition-delay: .9s}
							&:nth-child(19) {transition-delay: .95s; -webkit-transition-delay: .95s}
							&:nth-child(20) {transition-delay: 1s; -webkit-transition-delay: 1s}
							&:nth-child(21) {transition-delay: 1.05s; -webkit-transition-delay: 1.05s}
							&:nth-child(22) {transition-delay: 1.1s; -webkit-transition-delay: 1.1s}
							&:nth-child(23) {transition-delay: 1.15s; -webkit-transition-delay: 1.15s}
							&:nth-child(24) {transition-delay: 1.2s; -webkit-transition-delay: 1.2s}
							&:nth-child(25) {transition-delay: 1.25s; -webkit-transition-delay: 1.25s}
							&:nth-child(26) {transition-delay: 1.3s; -webkit-transition-delay: 1.3s}
							&:nth-child(27) {transition-delay: 1.35s; -webkit-transition-delay: 1.35s}
							&:nth-child(28) {transition-delay: 1.4s; -webkit-transition-delay: 1.4s}
							&:nth-child(29) {transition-delay: 1.45s; -webkit-transition-delay: 1.45s}
							&:nth-child(30) {transition-delay: 1.5s; -webkit-transition-delay: 1.5s}
							&:nth-child(31) {transition-delay: 1.55s; -webkit-transition-delay: 1.55s}
							&:nth-child(32) {transition-delay: 1.6s; -webkit-transition-delay: 1.6s}
							&:nth-child(33) {transition-delay: 1.65s; -webkit-transition-delay: 1.65s}
							&:nth-child(34) {transition-delay: 1.7s; -webkit-transition-delay: 1.7s}
							&:nth-child(35) {transition-delay: 1.75s; -webkit-transition-delay: 1.75s}
							&:nth-child(36) {transition-delay: 1.8s; -webkit-transition-delay: 1.8s}
							&:nth-child(37) {transition-delay: 1.85s; -webkit-transition-delay: 1.85s}
							&:nth-child(38) {transition-delay: 1.9s; -webkit-transition-delay: 1.9s}
							&:nth-child(39) {transition-delay: 1.95s; -webkit-transition-delay: 1.95s}
							&:nth-child(40) {transition-delay: 2s; -webkit-transition-delay: 2s}
							span.icon-play-2.submenu-trigger {
								opacity: 0.7;
								transition-delay: .45s;
								-webkit-transition-delay: .45s;
							}
						}
					}
				}
			}

		
	}

	div#css3aw-social-menu-wrapper {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		width: 46px;
		height: 46px;
		@media (min-width: 1024px) {width: 60px; height: 60px;}
		float: right;

		span.icon-share {
			height: 46px;
			display: block;
			width: 46px;
			line-height: 46px;
			cursor: pointer;
			transition: color .15s linear;
			-webkit-transition: color .15s linear;
			@media (min-width: 1024px) {
				width: 60px;
				height: 60px;
				line-height: 60px;
				font-size: 20px;
			}
			&.hover, &.clicked {
				color: @hover-color;
			}
		}

		ul {
			position: relative;
			margin-top: 1px;
			li {
				width: 46px;
				overflow: hidden;
				white-space: nowrap;
				position: relative;
				height: 46px;
				margin-left: 46px;
				line-height: 46px;
				a {
					display: block;
					transition: color .15s linear;
					-webkit-transition: color .15s linear;
				}
				&:hover > a {color: @hover-color;}
				@media (min-width: 1024px) {
					width: 60px;
					height: 60px;
					line-height: 60px;
					font-size: 20px;
					margin-left: 60px;
				}
				transition: margin-left .15s linear;
				-webkit-transition: margin-left .15s linear;
			}
		}
		ul#css3aw-social-menu.hover, ul#css3aw-social-menu.clicked {
			li {
				margin-left: 0px;
				@media (min-width: 1024px) {margin-left: 0px;}
				&:first-child {transition-delay: .05s; -webkit-transition-delay: .05s}
				&:nth-child(2) {transition-delay: .1s; -webkit-transition-delay: .1s}
				&:nth-child(3) {transition-delay: .15s; -webkit-transition-delay: .15s}
				&:nth-child(4) {transition-delay: .2s; -webkit-transition-delay: .2s}
				&:nth-child(5) {transition-delay: .25s; -webkit-transition-delay: .25s}
				&:nth-child(6) {transition-delay: .3s; -webkit-transition-delay: .3s}
				&:nth-child(7) {transition-delay: .35s; -webkit-transition-delay: .35s}
				&:nth-child(8) {transition-delay: .4s; -webkit-transition-delay: .4s}
				&:nth-child(9) {transition-delay: .45s; -webkit-transition-delay: .45s}
				&:nth-child(10) {transition-delay: .5s; -webkit-transition-delay: .5s}
				&:nth-child(11) {transition-delay: .55s; -webkit-transition-delay: .55s}
				&:nth-child(12) {transition-delay: .6s; -webkit-transition-delay: .6s}
				&:nth-child(13) {transition-delay: .65s; -webkit-transition-delay: .65s}
				&:nth-child(14) {transition-delay: .7s; -webkit-transition-delay: .7s}
				&:nth-child(15) {transition-delay: .75s; -webkit-transition-delay: .75s}
				&:nth-child(16) {transition-delay: .8s; -webkit-transition-delay: .8s}
				&:nth-child(17) {transition-delay: .85s; -webkit-transition-delay: .85s}
				&:nth-child(18) {transition-delay: .9s; -webkit-transition-delay: .9s}
				&:nth-child(19) {transition-delay: .95s; -webkit-transition-delay: .95s}
				&:nth-child(20) {transition-delay: 1s; -webkit-transition-delay: 1s}
			}
		}
	}
}
